<template>
  <div class="mine-wrap">

    <div class="mine-user-box">
      <div class="user-info-box">
        <div class="avatar-box" v-if="userAvatar">
          <img :src="userAvatar" class="avatar-start-pic" onclick="return false"/>
          <img :src="userSex!=2?require('./icon_men.png'):require('./icon_women.png')" class="pic1"
               onclick="return false"/>
        </div>

        <div class="avatar-box avatar-start" v-else>
          <img :src="userSex!=2?require('./icon_men.png'):require('./icon_women.png')" class="pic1"
               onclick="return false"/>
        </div>

        <div class="real-box">
          <span class="nick-text">{{nickName}}</span>
          <div class="real-con" v-if="realStatus == 1"><span class="real-text">已实名</span></div>
          <span class="no-real-con" v-else>未实名认证</span>
        </div>
        <div class="edit-box" @click="editMaterial">修改个人资料&nbsp;></div>
      </div>

      <div class="with-draw-box">
        <div class="with-draw-money">
          <span class="with-money-num">{{wallet}}元</span>
          <span class="account-detail" @click="accountPage">账户明细&nbsp;></span>
        </div>

        <div class="deposit-box" @click="depositPage">
          <img src="./withdrawal.png" class="pic2" onclick="return false"/>
          <span class="with-text">提现</span>
        </div>
      </div>
    </div>

    <div class="item-list-box">
      <div class="item-list" @click="applyPage">
        <img src="./icon_apply.png" class="pic" onclick="return false"/>
        <span class="item-list-title">门店申请</span>
      </div>
      <div class="item-list" @click="proxyFeePage">
        <img src="./icon_detail.png" class="pic" onclick="return false"/>
        <span class="item-list-title">代理费明细</span>
      </div>
      <div class="item-list" @click="companyPage">
        <img src="./icon_recommended.png" class="pic" onclick="return false"/>
        <span class="item-list-title">企业推荐</span>
      </div>
      <div class="item-list" @click="msgPage">
        <img src="./icon_news.png" class="pic" onclick="return false"/>
        <span class="item-list-title">消息中心</span>
        <div class="msg-num-box" v-show="msgNum > 0">{{msgNum}}</div>
      </div>
    </div>

    <div class="item-content-box" @click="bankPage">
      <div class="item-content">
        <span class="item-content-title">银行卡管理</span>
        <img src="./in.png" class="pic3"/>
      </div>
    </div>
    <div class="item-content-box" @click="modifyPage">
      <div class="item-content">
        <span class="item-content-title">修改密码</span>
        <img src="./in.png" class="pic3"/>
      </div>
    </div>
    <div class="item-content-box" @click="showServer">
      <div class="item-content">
        <span class="item-content-title">客服热线</span>
        <img src="./in.png" class="pic3"/>
      </div>
    </div>

    <v-warn type="1" title="拨打客服" :content="content" :value="showService" @cancel="hideServer"
            @confirm="callServer"></v-warn>


    <v-dialog v-model="showBindMark" content="您还未绑定工资卡，请先绑定再提现" cancelText="取消" confirmText="去绑定"
              @confirm="bindCardPage"
              @cancel="cancelBindCard"></v-dialog>

    <v-warn type="2" title="温馨提示" :content="sweetContent" confirmText="确定" :value="showSweet"
            @confirm="hideProxyFee"></v-warn>

  </div>
</template>

<script>
  import {getShopApply, queryUnReadMsg, selectBindBankCard, selectMaterial} from "../../../axios/api";
  import {getStore, getUrlKey, setSessionStore, setStore, toDecimal} from "../../../config/util";
  import warn from "../../../components/warn"
  import dialog from "../../../components/dialog"
  import Cookies from 'js-cookie'

  export default {
    data() {
      return {
        userMark: "",
        nickName: "",
        userAvatar: "",
        userSex: "",
        wallet: "",
        role: "",
        userPhone: "",
        realStatus: "",
        servicePhone: "",
        showService: false,//显示客服
        content: "",
        showBindMark: false,
        bindCardType: 0,
        bankUserName: "",
        bankCertNum: "",
        msgNum: "",
        wxUserId: getUrlKey("id"),
        identity: getUrlKey("identity"),
        showSweet: false,
        sweetContent: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      if (this.wxUserId) {//wx直接登录
        sessionStorage.setItem("userMark", base64.encode(this.wxUserId));
        this.initLogin(base64, this.wxUserId);
      }
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));

      this.queryMaterial();
      this.queryMsgNum();
    },
    methods: {
      initLogin(base64, id) {
        this.withdraw = base64.decode(getStore("withdraw_sign")); //判断不同的用户
        setStore("withdraw_sign", base64.encode(id));//验证不同用户登录后提现密码次数的问题

        if (id != this.withdraw) { //不是当前用户清除十分钟次数和cookie的时间
          localStorage.removeItem("sess_time_local");
          Cookies.remove("sess_time_local", "", {
            expires: -1,
            path: ''
          })
        }
        if (this.identity) {
          setSessionStore("proxy_identity", this.identity)
        }
      },
      queryMaterial() {//获取个人资料
        this.$vux.loading.show({
          text: '加载中',
        });

        let params = {
          "sgin": this.userMark,
          "id": this.userMark,
        };
        selectMaterial(params).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0 && res.data != null) {
            this.nickName = res.data.userName;//昵称
            this.userAvatar = res.data.userUrl;//用户头像
            this.userSex = res.data.userSex;//0未知1男2女
            this.wallet = toDecimal(res.data.money);//钱包金额
            this.role = res.data.role;//1 直营店主 2为加盟店主 5为代理 6店员
            this.userPhone = res.data.userTel;//用户手机号
            this.realStatus = res.data.isReal;//0未实名  1已实名
            this.servicePhone = res.data.servicePhone;//客服电话
            this.content = `客服电话：${res.data.servicePhone}`;
            setSessionStore("proxy_role", this.role);
            setSessionStore("proxy_avatar", this.userAvatar);
            setSessionStore("proxy_store_schema", res.data.shopType);//门店模式
          }
        });
      },
      applyPage() {//申请门店
        if (this.role == 6) {
          this.sweetContent = "店员不能进行门店申请";
          this.showSweet = true;
        } else {
          let params = {
            "sgin": this.userMark
          };
          getShopApply(params).then((res) => {
            if (res.code == 0 && res.data != null) {
              this.$router.push("/applyStoreRecord");
            } else {
              this.$router.push("/applyStore");
            }
          });
        }
      },
      proxyFeePage() {//代理费明细
        this.sweetContent = "此功能暂未开放";
        this.showSweet = true;
      },
      showServer() {//拨号客服
        this.showService = true;
      },
      hideServer() {
        this.showService = false;
      },
      callServer() {
        this.showService = false;
        window.location.href = 'tel://' + this.servicePhone;
      },
      modifyPage() {//修改密码
        this.$router.push({path: "/modifyPwd", query: {"phone": this.userPhone}});
      },
      editMaterial() {
        this.$router.push("/material");
      },
      bankPage() {//银行卡管理
        let params = {
          "sgin": this.userMark
        };
        selectBindBankCard(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null) {
              if (res.data.bankNumber != "" && res.data.bankNumber != null && res.data.bankNumber != undefined) {//换绑
                sessionStorage.setItem("proxy_sys_phone", res.data.phone);//系统手机号
                let cardNum = this.$decruption(res.data.bankNumber);

                this.$router.push({
                  path: "/bankManager",
                  query: {
                    "cardType": res.data.cardType,
                    "cardNum": cardNum.substring(cardNum.length - 4, cardNum.length),
                    "bankName": res.data.bankName,
                  }
                });
              } else {//驻场手动输入姓名和身份证-绑卡
                let certNum = this.$decruption(res.data.identityNo);
                this.$router.push({
                  path: "/bankCardBind",
                  query: {"proxy_bank_user_name": res.data.userName, "proxy_bank_user_cert": certNum, "showPage": 2}
                });
              }
            } else {//绑卡
              this.$router.push({path: "/bankCardBind", query: {"showPage": 1}});
            }
          }
        });
      },
      depositPage() {//提现页
        let params = {
          "sgin": this.userMark
        };
        selectBindBankCard(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null) {
              if (res.data.bankNumber == "" || res.data.bankNumber == null || res.data.bankNumber == undefined) {//驻场手动输入姓名和身份证-绑卡
                this.bankCertNum = this.$decruption(res.data.identityNo);
                this.bankUserName = res.data.userName;
                this.showBindMark = true;
                this.bindCardType = 1;
              } else {
                this.$router.push("/deposit");
              }
            } else {//绑卡
              this.showBindMark = true;
              this.bindCardType = 2;
            }
          }
        });
      },
      bindCardPage() {
        if (this.bindCardType == 1) {
          this.$router.push({
            path: "/bankCardBind",
            query: {"proxy_bank_user_name": this.bankUserName, "proxy_bank_user_cert": this.bankCertNum, "showPage": 2}
          });
        } else if (this.bindCardType == 2) {
          this.$router.push({path: "/bankCardBind", query: {"showPage": 1}});
        }
      },
      cancelBindCard() {
        this.showBindMark = false;
      },
      accountPage() {//账户明细
        this.$router.push("/accountDetail");
      },
      queryMsgNum() {//消息未读数
        let params = {
          "sgin": this.userMark
        };
        queryUnReadMsg(params).then((res) => {
          if (res.code == 0) {
            this.msgNum = res.data;
          }
        });
      },
      msgPage() {
        this.$router.push("/message");
      },
      companyPage() {//企业推荐
        this.$router.push("/companyReferrer");
      },
      hideProxyFee() {
        this.showSweet = false;
      },
    },
    components: {
      "v-warn": warn,
      "v-dialog": dialog
    }

  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .mine-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .mine-user-box {
      .wh(100%, 4.427rem);
      background: #FFF;
      position: relative;
      .user-info-box {
        display: flex;
        align-items: center;
        padding-top: 0.453rem;
        .wh(100%, 1.6rem);
        .avatar-box {
          margin-left: 0.32rem;
          position: relative;
          .wh(1.6rem, 1.6rem);
          background: rgba(246, 246, 246, 1);
          border-radius: 50%;
          .pic1 {
            position: absolute;
            z-index: 10;
            bottom: 0;
            right: 0;
            .wh(0.36rem, 0.36rem)
          }
          .avatar-start-pic {
            position: relative;
            .wh(1.6rem, 1.6rem);
            background: rgba(246, 246, 246, 1);
            border-radius: 50%;
          }
        }
        .avatar-start {
          border: 0.053rem solid rgba(220, 235, 245, 0.35);
        }
        .real-box {
          margin-left: 0.387rem;
          display: flex;
          flex-direction: column;
          .nick-text {
            padding-left: 0.08rem;
            .size-color(0.48rem, rgba(51, 51, 51, 1));
            font-weight: 500;
          }
          .real-con {
            .fj(center, center);
            margin-top: 0.28rem;
            .wh(1.44rem, 0.48rem);
            background: rgba(60, 175, 255, 0.12);
            border-radius: 0.24rem;
            .real-text {
              .size-color(0.293rem, rgba(60, 175, 255, 1));
            }
          }
          .no-real-con {
            margin-top: 0.28rem;
            padding-left: 0.08rem;
            .size-color(0.32rem, rgba(204, 204, 204, 1));
          }
        }
        .edit-box {
          margin-left: auto;
          margin-right: 0.32rem;
          .size-color(0.32rem, rgba(153, 153, 153, 1));
        }
      }
      .with-draw-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        .wh(9.587rem, 1.907rem);
        .bg-image('../page/index/mine/wallet_bg.png');
        .with-draw-money {
          display: flex;
          flex-direction: column;
          padding-left: 0.573rem;
          .with-money-num {
            padding-top: 0.493rem;
            padding-bottom: 0.267rem;
            .size-color-weight(0.667rem, rgba(255, 255, 255, 1), 500);
          }
          .account-detail {
            .size-color(0.32rem, rgba(255, 255, 255, 1))
          }

        }
        .deposit-box {
          display: flex;
          align-items: center;
          margin-left: auto;
          margin-top: 0.653rem;
          .wh(1.76rem, 0.667rem);
          background: rgba(255, 255, 255, 0.3);
          border-top-left-radius: 0.333rem;
          border-bottom-left-radius: 0.333rem;
          .pic2 {
            margin-left: 0.253rem;
            margin-right: 0.12rem;
            .wh(0.48rem, 0.48rem);
          }
          .with-text {
            .size-color(0.333rem, rgba(255, 255, 255, 1));
          }
        }
      }
    }
    .item-list-box {
      .wh(100%, 2.8rem);
      background: #FFF;
      display: flex;
      align-items: center;
      margin-bottom: 0.267rem;
      .item-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:last-child {
          position: relative;
        }
        .pic {
          .wh(0.853rem, 0.853rem)
        }
        .item-list-title {
          padding-top: 0.267rem;
          .size-color(0.373rem, rgba(68, 68, 68, 1));
        }
        .msg-num-box {
          position: absolute;
          top: -0.2rem;
          right: 0.58rem;
          .fj(center, center);
          .wh(0.4rem, 0.4rem);
          background: rgba(235, 68, 68, 1);
          border-radius: 50%;
          .size-color(0.2rem, rgba(255, 255, 255, 1));
        }
      }

    }
    .item-content-box {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .item-content {
        position: relative;
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        .wh(96.8%, 1.333rem);
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1);
        .item-content-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .pic3 {
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(0.32rem, 0.32rem);
        }
      }
    }
  }
</style>
